<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>聊天室列表</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
</head>

<body>
    <div class="container" id="app">

        <div class="alert alert-warning" v-show="show_rent_prise" >
            <a href="#" class="close" data-dismiss="alert" v-on:click="close">
                &times;
            </a>
            <strong>${msg}</strong>
        </div>

        <div class="panel panel-body">
            <h2></h2>
            <div class="form-group">
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="name" name="name" v-model="keyword" placeholder="关键字搜素">
                </div>
                <div class="col-sm-6">
                    <button type="submit" class="btn btn-default" v-on:click="searchRoom" >搜素</button>
                </div>
            </div>

        </div>

        <div class="panel panel-body">
            <h1>${title} (共${count}个)</h1>

            <div class="panel panel-default panel-body box-show ">
                <div class="col-sm-3">
                    <strong>聊天室名称</strong>
                </div>
                <div class="col-sm-3">
                    <strong>聊天室编号</strong>
                </div>
                <div class="col-sm-3">
                    <strong>在线人数</strong>
                </div>
                <div class="col-sm-3">
                    <strong>操作</strong>
                </div>
            </div>

            <div class="panel panel-default panel-body box-show "  v-for="room in list">
                <div class="col-sm-3">
                    ${room.name}
                </div>
                <div class="col-sm-3">
                    ${room.number}
                </div>
                <div class="col-sm-3">
                    ${room.user_number}
                </div>
                <div class="col-sm-3">
                    <a href="javascript:;"  v-on:click="joinRoom(room.id, room.name)" class="room">进入聊天室</a>
                </div>
            </div>

        </div>
        <div class="panel panel-body">
            <h2></h2>
            <div class="form-group">
                <input type="text" class="form-control" id="name" name="name" v-model="room_name" placeholder="请输入聊天室名称">
            </div>
            <button type="submit" class="btn btn-default"  v-on:click="addRoom" >添加</button>
        </div>
    </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    <script type="text/javascript">

        new Vue({
            el: "#app",
            delimiters: ['${', '}'],
            data() {
                return {
                    show_rent_prise: false,
                    msg: "",
                    title: "聊天室列表",
                    keyword: "",
                    list: [],
                    count:0,
                    room_name: "",
                }
            },
            mounted(){
                this.getList();
            },
            methods: {
                getList: function () {
                    let _this = this
                    axios.post('/api/room/room-list', {
                      keyword: _this.keyword
                    }).then(function (response) {
                            console.log(response)
                            if (response.data.code == 0){
                                _this.list = response.data.data.list;
                                _this.count = response.data.data.count;
                            }else{
                                _this.msg = response.data.msg;
                                _this.show_rent_prise = true;
                            }
                    }).catch(function (error) { // 请求失败处理
                            console.log(error);
                    });
                },
                addRoom: function () {
                    // 添加聊天室
                    let _this = this
                    axios.post('/api/room/room-add', {
                        room_name: _this.room_name
                    }).then(function (response) {
                        if (response.data.code == 0){
                            _this.getList()
                        }else{
                            _this.msg = response.data.msg;
                            _this.show_rent_prise = true;
                        }
                    }).catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                },
                searchRoom: function () {
                    this.getList()
                },
                close: function () {
                    this.show_rent_prise = false;
                },
                joinRoom: function (roomId, roomName) {
                    let name = prompt("请输入用户名", "");
                    // 添加聊天室添加聊天室
                    let _this = this
                    axios.post('/api/user/user-add', {
                        room_id: roomId,
                        user_name: name,
                    }).then(function (response) {
                        if (response.data.code == 0){
                            // _this.getList()
                            window.location.href = "/api/room/room-detail-index/" + roomName + "\/" + roomId + "\/" + response.data.data;
                        }else{
                            _this.msg = response.data.msg + " : "+ response.data.data;
                            _this.show_rent_prise = true;
                        }
                    }).catch(function (error) { // 请求失败处理
                            console.log(error);
                        });

                }
            }
        })

    </script>
</body>

</html>